<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px">
          投标详情页面
        </span>
      </div>
      <div class="require-body">
        <div class="form-content">
          <el-form
            :rules="rules"
            ref="ruleForm"
            label-position="right"
            label-width="90px"
            :model="form"
          >
            <el-form-item label="需求类型" prop="reqType">
              <el-input :disabled="true" v-model="form.reqType"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="proName">
              <el-input :disabled="true" v-model="form.proName"></el-input>
            </el-form-item>
            <el-form-item label="工程类型" prop="proType">
              <el-input :disabled="true" v-model="form.proType"></el-input>
            </el-form-item>
            <el-form-item label="工程编码">
              <el-input :disabled="true" v-model="form.proCode"></el-input>
            </el-form-item>
            <el-form-item label="采购类别">
              <el-input :disabled="true" v-model="form.bugType"></el-input>
            </el-form-item>
            <el-form-item label="估算价格">
              <el-input :disabled="true" v-model="form.prePrice"></el-input>
            </el-form-item>
            <el-form-item label="采购范围">
              <el-input :disabled="true" v-model="form.buyRange"></el-input>
            </el-form-item>
            <el-form-item label="工期需求">
              <el-input :disabled="true" v-model="form.timeReq"></el-input>
            </el-form-item>
            <el-form-item label="供应商需求">
              <el-input :disabled="true" v-model="form.busReq"></el-input>
            </el-form-item>
            <el-form-item label="需求原因">
              <el-input :disabled="true" v-model="form.reqCause"></el-input>
            </el-form-item>
          </el-form>
          <div class="clear"></div>
          <input
            type="file"
            style="display: none"
            id="file"
            @change="fileChange"
          />
          <div class="active-button">
            <a
              href="javascript:void(0)"
              @click="showInputFile"
              style="padding: 10px 60px"
            >
              <span></span> <span></span> <span></span>
              <span></span> 点我文件上传
            </a>
            <span style="margin-left: 20px">{{ srcValue || '请上传文件' }}</span>
          </div>

          <button class="shadow-button shiny" style="margin-top: 20px" @click="getClick">
            <a :href="[srcValue]" target="_blank" :download="[srcValue]" id="preview"
              >预览</a
            >
          </button>
          <button
            class="shadow-button shiny"
            style="margin-top: 20px; margin-left: 80px"
            @click="toBid()"
          >
            进行投标
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import { bidRequirement, getReqById } from "api/require.api";
import { uploadFile, getUploadFile } from "api/modules/bid.api";

export default {
  name: "BitDetail",
  data() {
    return {
      form: {
        id: "",
        reqType: "",
        proName: "",
        proType: "",
        proCode: "",
        bugType: "",
        prePrice: "",
        buyRange: "",
        timeReq: "",
        busReq: "",
        reqCause: "",
        file: "",
      },
      rules: {
        reqType: [{ required: true, message: "请输入内容", trigger: "blur" }],
        proType: [{ required: true, message: "请输入内容", trigger: "blur" }],
        proName: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
      srcValue: "",
    };
  },
  created() {
    this.form = getReqById(this.$route.query.id).data;
  },
  methods: {
    getClick() {
      const html_a = document.querySelector("#preview");
      html_a.click();
    },
    showInputFile() {
      const input = document.querySelector("#file");
      input.click();
    },
    async fileChange(e) {
      const file = e.target.files[0];
      const fd = new FormData();
      fd.set("file", file);
      const { name } = file;
      const { data } = await uploadFile(fd);
      this.form.file = name;
      this.srcValue = name;
      // const reponse = await getUploadFile({ fileId: data.id });
    },
    getId() {
      return new Date().getTime();
    },
    async toBid() {
      this.$router.push({
        path: "waitBid",
      });
      bidRequirement(this.form);
      this.$message.success("投标成功");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.require-container {

  margin: 0 auto;
  max-width: 80vw;
  padding: 20px;
  ::v-deep {
    .el-form-item {
      width: 40%;
      float: left;
      &__content {
        width: 50%;
      }
    }
  }
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
  }
  .clear {
    clear: both;
  }
  .require-body {
    padding: 20px;
    background-color: #fff;
  }
  .form-content {
    margin-left: 80px;
    margin-top: 50px;
  }
}
</style>
